<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
  <link rel="stylesheet" th:href="@{'/css/buttonStyle.css'}">
  <title>My Parcels</title>
</head>

<body style="background-color: #424564; height: 100vh">

  <!-- 导航栏 -->
  <div class="container-fluid" style="background-color: rgb(245,245,245); ">
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <div class="collapse navbar-collapse" id="navbarColor01">
          <ul class="navbar-nav mr-auto">
            <div class="container">
              <li class="nav-item">
                <button type="button" id="parcelQuery"
                        class="btn btn-primary " style="width: 150px; height:45px; font-size: large;">
                  Search
                </button>
              </li>
            </div>

            <div class="container">
              <li class="nav-item">
                <button type="button" id="myParcel"
                        class="btn btn-primary active" style="width: 130px; height: 45px; font-size: large;">My Parcels</button>
              </li>
            </div>

            <div class="container">
              <li class="nav-item">
                <button type="button" class="btn btn-primary " id="parcelPickUp"
                        style="width: 150px; height: 45px; font-size: large;">Parcel Pickups</button>
              </li>
            </div>

            <div class="container">
              <li class="nav-item">
                <button type="button" class="btn btn-primary" id='parcelPost'
                        style="width: 150px; height: 45px; font-size: large;">Mailing parcels</button>
              </li>
            </div>
          </ul>
          <form class="form-inline my-2 my-lg-0" th:if="${session['userId'] != null}">
            <div class="btn-group dropleft">
              <button type="button" class="btn btn-info dropdown-toggle"
                      style="width: 150px; height: 45px;" id="logout"
                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Log Out
              </button>
            </div>
          </form>
        </div>
      </nav>
    </div>
  </div>

  <!-- Logo栏 -->
  <div class="container " style="padding: 5% 0% 5% 19.5%" >
    <img th:src="@{'/images/logo_white.png'}" style="width:65%" class="img-responsive center-block" >
  </div>

  <!-- 我的包裹记录导航栏 -->
  <div class="container bg-white" style="margin-bottom: 3%; margin-top: 3%; border-radius: 15px; padding-top:10px;" >
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="all" >All parcels</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="taken" >Parcel History</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="abnormal">Abnormal Parcels</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content" style="margin-top: 10px;">
      <div class="tab-pane fade active show">
        <!-- 标题 -->
        <h3 style="padding-left: 30px; padding-right: 30px; margin-bottom: 40px; margin-top: 20px;">

        </h3>

        <div th:if="${resultNumber == 0}" class="text-warning" style="padding-bottom: 30px; margin-bottom: 10%;">
          <div class="alert alert-danger">
            <strong>Error:</strong> No result has been founded!
          </div>
        </div>
        <!-- 表格 -->
        <table th:if="${resultNumber != 0}" class="table table-hover">
          <thead>
            <tr>
              <th scope="col" style="vertical-align: middle;">Tracking Number</th>
              <th scope="col" style="vertical-align: middle; text-align: center;">Time</th>
              <th scope="col" style="vertical-align: middle;">Current Status</th>
              <th scope="col" style="vertical-align: middle;">Operator</th>
            </tr>
          </thead>
          <tbody>
            <tr  th:each="parcel:${allParcel}">
              <th style="vertical-align: middle;" scope="row" th:text="${parcel.getTrackingNumber()}"></th>
              <td style="text-align: center;" th:text="${#dates.format(parcel.getCurrentStateTime(),'yyyy-MM-dd HH:mm')}">12 December 2020</td>
              <td th:text="${parcel.getCurrentStateByText()}"></td>
              <td style="vertical-align: middle;" th:text="${parcel.getOperatorName()}"></td>
            </tr>
          </tbody>
        </table>
        <!-- 分页 -->
        <div th:if="${resultNumber != 0}" class="container d-flex justify-content-center">
          <div>
            <ul class="pagination">
              <li class="page-item" id="start">
                <a class="page-link" th:href="@{'/myParcel?get=' + ${get} +'&page=' + ${currentPage - 1 }}">&laquo;</a>
              </li>
              <li class="page-item" th:id="'all-page-' + ${i}" th:each="i:${#numbers.sequence(1,maxPage)}">
                <a class="page-link" th:href="@{'/myParcel?get=' + ${get} +'&page=' + ${i}}" th:text="${i}">1</a>
              </li>
              <li class="page-item" id="end">
                <a class="page-link" th:href="@{'/myParcel?get=' + ${get} +'&page=' + ${currentPage + 1 }}">&raquo;</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>


  <footer style="background-color: rgb(51, 51, 51); padding-bottom: 50px; padding-top: 10px;">
    <div class="container text-white text-center">
      <h4>XMUM STUDENT WORKS</h4>
    </div>
  </footer>

  <!-- Javascript -->
  <script th:src="@{'/js/jquery-3.5.1.min.js'}"></script>
  <script th:src="@{'/js/bootstrap.bundle.min.js'}"></script>
  <script th:inline="javascript">
    $().ready(function() {
      //Javascript

      var currentPage = [[${currentPage}]];
      console.log(currentPage);
      var maxPage = [[${maxPage}]];
      console.log(maxPage)
      if (maxPage === currentPage) {
        $("#end").addClass('disabled');
      }
      if (currentPage === 1) {
        $('#start').addClass('disabled');
      }
      $("#all-page-" + currentPage).addClass('active');

      switch ([[${get}]]) {
        case 3:
          $('#all').addClass('active');
          break;
        case 1:
          $('#taken').addClass('active');
          break;
        case 2:
          $('#abnormal').addClass('active');
          break;
        default:
          break;
      }

      $('#all').click(function () {
        window.location.href = [[@{'/myParcel?get=3'}]];
      })
      $('#taken').click(function () {
        window.location.href = [[@{'/myParcel?get=1'}]];
      })
      $('#abnormal').click(function () {
        window.location.href = [[@{'/myParcel?get=2'}]];
      })
      $('#myParcel').click(function () {
        window.location.href = [[@{'/myParcel'}]];
      })
      $('#parcelQuery').click(function (){
        window.location.href = [[@{'/public/parcelQuery'}]];
      })
      $('#parcelPickUp').click(function(){
        window.location.href = [[@{'/parcelPickUp'}]];
      });
      $('#logout').click(function () {
        window.location.href = [[@{'/public/logout'}]]
      })
      $('#parcelPost').click(function () {
        window.location.href = [[@{'/comingSoon'}]];
      })
    })
  </script>
</body>

</html>